<template>
  <div class="createproduct">
    <div class="imgbox">
      <el-upload
        class="upload-demo"
        drag
        action="http://192.168.35.17:3005/product/uploadproduct"
        multiple
        :auto-upload="false"
        :http-request="onSubmit"
        :on-change = "handlechange"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
    </div>

    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="产品ID">
        <el-input v-model="form.id"></el-input>
      </el-form-item>
      <el-form-item label="产品名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="产品简介">
        <el-input v-model="form.txt"></el-input>
      </el-form-item>
      <el-form-item label="产品详情">
        <el-input type="textarea" v-model="form.page"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit()">立即创建</el-button>
        <el-button @click="flesh()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { uploadproductFunc } from "../http/request";
export default {
  name: "createproduct",
  data() {
    return {
      fileList:[],
      form: {
        id:"",
        name:"",
        txt:"",
        page:"",
      },
    };
  },
  methods: {
    handlechange(file,fileList){
      this.fileList = fileList;
      console.log(this.fileList);
    },
    onSubmit() {
      let config = {
        headers: {
          "Content-Type":
            "multipart/form-data;boundary = "
        },
      };
      let formData = new FormData();
      this.fileList.forEach(file => {
        formData.append("file",file.raw);
      });
      formData.append("id", this.form.id);
      formData.append("name", this.form.name);
      formData.append("txt", this.form.txt);
      formData.append("page", this.form.page);

      uploadproductFunc("/product/uploadproduct", formData,config)
      .then((data) => {
      });

      // 刷新页面
      this.$router.go(0)
    },
    flesh(){
      // 刷新页面
      this.$router.go(0);
    }
  
  },
};
</script>

<style lang="scss" scoped>
.createproduct {
  .imgbox {
    padding-top: 20px;
    .upload-demo {
      margin-left: 35%;
    }
  }
}
</style>